<template>
	<view class="content">
		<view style="margin:20rpx 30rpx">
			<u-search shape='square' :showAction='false' bgColor='#202126FF' placeholder="商品搜索"></u-search>
		</view>
		<uni-segmented-control :current="tab" :values="items" @clickItem="onClickItem" style-type="text"
			active-color="#fff"></uni-segmented-control>
		<view class="order-list">
			<view class="goods-detail" v-if="list.length">
				<view class="order-item" v-for="(item, index) in list" :key="index">
					<view class='cell-group'>
						<view class='cell-item' style="border-radius: 20rpx 20rpx 0 0;"
							@click="orderDetail(item.order_id)">
							<view class='cell-item-hd'>
								<view class='cell-hd-title' style="color: #fff;">订单号：{{ item.order_id }}</view>
							</view>
							<view class='cell-item-ft'>
								<text class='cell-ft-text' style="color: #fff;">{{ item.cdate }}下单 |</text>
							</view>
							<view class='cell-item-ft'>
								<text class='cell-ft-text' style="color: #F2D7AAFF;">{{ item.order_status_name }}</text>
							</view>
						</view>
					</view>
					<view class='img-list'>
						<block v-for="(goods, key) in item.items" :key="key">
							<view class='img-list-item' style="display: flex;border-radius: 0 0 20rpx 20rpx;"
								v-if="tab != 4 || goods.name.indexOf('赠品') < 0">
								<image class='img-list-item-l little-img have-none' :src='goods.image_url'
									style="width: 216rpx;height: 216rpx;border-radius: 20rpx;"></image>
								<view class='img-list-item-r little-right' style="flex: 1;">
									<view class='little-right-t'>
										<view class='goods-name list-goods-name' @click="orderDetail(item.order_id)">
											{{ goods.name }}
										</view>
									</view>
									<view class="romotion-tip">
										<view class="romotion-tip-item" v-for="(promotion, k) in goods.promotion_list"
											:key="k">
											{{ promotion }}
										</view>
									</view>
									<view class='goods-item-c' style="margin-bottom: 36rpx;">
										<view class='goods-buy'>
											<view class='goods-salesvolume' v-if="goods.addon !== null">
												{{ goods.addon }}
											</view>
										</view>
									</view>
									<view style="display: flex;justify-content: space-between;align-items: center;">
										<view class='goods-price' v-if="item.order_type != 7"
											style="color: #F2D7AAFF;font-weight: bold;font-size:36rpx;"><text
												style="font-size: 24rpx;">￥</text>{{ goods.price }}</view>
										<view class='goods-price' v-else
											style="color: #F2D7AAFF;font-weight: bold;font-size:36rpx;">{{ goods.price }}<text
												style="font-size: 24rpx;">购物积分</text></view>
										<view class='goods-num'
											style="color: #F2D7AAFF;font-size: 28rpx;font-weight: bold;">×
											{{ goods.nums }}
										</view>
									</view>
									
									<view class='goods-item-c' style="margin-bottom: 36rpx;">
										<view class='goods-buy'>
											<view class='goods-salesvolume' >
												收件人：{{ item.ship_name }}
											</view>
										</view>
									
										<view class='goods-buy'>
											<view class='goods-salesvolume' >
												手机号：{{ item.ship_mobile }}
											</view>
										</view>
										<view class='goods-buy'>
											<view class='goods-salesvolume' >
												客户收货地址：{{ item.ship_area }}
											</view>
										</view>
									</view>
								</view>
							</view>
						</block>
					</view>

					<view class='cell-group'>
						<view class='cell-item' style="background-color: transparent;">
							<view class='cell-item-ft goods-num'
								style="flex:1;justify-content: space-between;color: #999999;">
								<view class='cell-ft-text' style="font-size: 24rpx;">共 {{ item.items.length }}件商品</view>
								<view class='cell-ft-text' style="display: flex;align-items: center;font-size: 28rpx;">
									<view v-if="item.order_type != 7">实付款：￥{{ item.order_amount }}</view>
									<view v-else>实付款：{{ item.order_amount }}<text
												style="font-size: 24rpx;">出局积分</text></view>
								</view>
							</view>
						</view>
					</view>
					
					<view class='order-list-button' v-if="item.status===1"
						style="border-radius:20rpx;display: flex;align-items: center;">
						
						<view class="Left" style="flex:1">
							<view style="display: flex;align-items: center;font-size: 24rpx;color: #b9b9b9;flex: 1;"
								v-if="item.status === 1 && item.pay_status === 1">
								<image src="/static/sysj.png" style="width: 25rpx;height: 25rpx;margin-right: 10rpx;"
									mode="">
								</image>
								剩余时间：
								<u-count-down :time="syTime(item.expire_time)" format="HH:mm:ss"></u-count-down>
							</view>
							<view v-if="item.status === 1 && item.pay_status === 2 && item.ship_status!==3"
								style="display: flex;align-items: center;font-size: 24rpx;color: #b9b9b9;flex: 1;">
								<image src="/static/sysj.png" style="width: 25rpx;height: 25rpx;margin-right: 10rpx;"
									mode="">
								</image>
								预计发货时间：<text style="color: #F2D7AAFF;">{{FHDate(item.payment_time)}}前</text>
							</view>
							<view class="Left" style="flex:1" v-if="item.delivery[0].logi_no && item.status==1">
								
								<view style="display: flex;align-items: center;font-size: 24rpx;color: #b9b9b9;flex: 1;">
									
									<text style="color: #F2D7AAFF;" @tap="copy(item.delivery[0].logi_no)">快递号：{{item.delivery[0].logi_no}}  复制</text>
								</view>
							</view>
						</view>
						

						<view class="Right" style="display: flex;">
							<!-- 	<button class='btn btn-circle btn-w again' hover-class="btn-hover" @click="buyAgain(item.items)"style="width: initial;"> 再次购买 </button> -->
							<!-- <button class='btn btn-circle btn-g' hover-class="btn-hover">查看详情</button> -->
							<button class='btn btn-circle btn-g' hover-class="btn-hover"
								style="color: #F2D7AAFF;border-color: #F2D7AA;border-radius: 10rpx;background-color: #202126;"
								v-if="item.status === 1 && item.pay_status === 2 && item.ship_status!==3"
								@click="orderDetail(item.order_id)">查看详情</button>
							<button class="btn btn-circle" hover-class="btn-hover"
								v-if="item.status === 1 && item.pay_status === 1"
								style="color: #fff;border: 1px solid #F2D7AA;border-radius: 10rpx;color: #F2D7AA;font-size: 28rpx;margin-right: 9rpx;background: #202126;"
								@click="cancelOrder(item.order_id)">关闭订单</button>
							<button class="btn btn-circle" hover-class="btn-hover"
								v-if="item.status === 1 && item.pay_status === 1"
								style="color: #000;background: linear-gradient(180deg, #F2D7AA 0%, #DEBC86 100%);border-radius: 10rpx ;border: none;width: 116rpx;height: 52rpx;text-align: center;line-height: 52rpx;font-size: 28rpx;"
								@click="toPay(item.order_id)">支付</button>
							<!-- <button class='btn btn-circle btn-w' hover-class="btn-hover"
								v-if="item.status === 1 && item.pay_status >= 2 && item.ship_status >= 3 && item.confirm === 1"
								@click="logistics(item.order_id)"
								style="color: #F2D7AAFF;border-color: #F2D7AA;border-radius: 10rpx;background-color: #202126;">查看物流</button> -->
							<button class='btn btn-circle btn-w' hover-class="btn-hover"
								v-if="item.status === 1 && item.pay_status >= 2 && item.ship_status >= 3 && item.confirm === 1"
								@click="tackDelivery(index)"
								style="color: #F2D7AAFF;border-color: #F2D7AA;border-radius: 10rpx;background-color: #202126;">确认收货</button>
							<button class='btn btn-circle btn-w' hover-class="btn-hover"
								style="color: #F2D7AAFF;border-color: #F2D7AA;border-radius: 10rpx;background-color: #202126;"
								v-if="item.status === 1 && item.pay_status >= 2 && item.ship_status >= 3 && item.confirm >= 2 && item.is_comment === 1"
								@click="toEvaluate(item.order_id)">立即评价</button>
						</view>
					</view>
				</view>
				<uni-load-more :status="loadStatus"></uni-load-more>
			</view>
			<view class="order-none" v-else>
				<image class="order-none-img" src="/static/image/order.png" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	import uniSegmentedControl from "@/components/uni-segmented-control/uni-segmented-control.vue"
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
	import {
		orders,
		goods
	} from '@/config/mixins.js'
	export default {
		mixins: [orders, goods],
		components: {
			uniSegmentedControl,
			uniLoadMore
		},
		data() {
			return {
				items: [
					'全部',
					'待支付',
					'待发货',
					'待收货',
					'已完成',
				],
				list: [],
				page: 1,
				limit: 5, // 每页订单显示数量
				loadStatus: 'more',
				status: [0, 1, 2, 3, 4], // 订单状态 0全部 1待付款 2待发货 3待收货 4待评价
				isReload: false, // 页面是否刷新?重载
				isBuyAgain: false, //再次购买点击状态
			}
		},
		onShow() {
			this.isBuyAgain = false
			this.initData()
		},
		computed: {
			// 获取订单列表tab
			tab() {
				return this.$store.state.orderTab
			}
		},
		methods: {
			copy(value){
				uni.setClipboardData({
					data: value, //要被复制的内容
					success: () => { //复制成功的回调函数
						uni.showToast({ //提示
							title: '复制成功'
						})
					}
				});
			},
			logistics(key) {
				this.$api.orderDetail({
					order_id: key
				}, res => {
					let address1 = res.data.ship_area_name ? res.data.ship_area_name : ''
					let address2 = res.data.ship_address ? res.data.ship_address : ''
					let address = address1 + address2
					this.showExpress(res.data.delivery[0].logi_code, res.data.delivery[0].logi_no, address)
				})
			},
			FHDate(e) {
				const today = new Date(e * 1000);
				const sevenDaysLater = new Date(today.getTime() + (7 * 24 * 60 * 60 * 1000)); // 计算出七天后的日期
				const year = sevenDaysLater.getFullYear().toString().padStart(4, '0'); // 获取年份，并使用 padStart 方法将其补齐到四位数
				const month = (sevenDaysLater.getMonth() + 1).toString().padStart(2, '0'); // 获取月份，并使用 padStart 方法将其补齐到两位数
				const day = sevenDaysLater.getDate().toString().padStart(2, '0'); // 获取日期，并使用 padStart 方法将其补齐到两位数
				const formattedDate = `${year}年${month}月${day}日`;
				return formattedDate
			},
			cancelOrder(orderId) {
				this.$common.modelShow('提示', '确认要取消订单吗?', () => {
					let data = {
						order_ids: orderId
					}

					this.$api.cancelOrder(data, res => {
						if (res.status) {
							this.$common.successToShow(res.msg, () => {
								this.initData()
							})
						} else {
							this.$common.errorToShow(res.msg)
						}
					})
				})
			},
			// 再次购买
			buyAgain(val) {
				// 防止重复点击
				if (!this.isBuyAgain) {
					this.isBuyAgain = true
				} else {
					return
				}

				let cart = []
				let _this = this;
				for (let i of val) {
					cart.push({
						"product_id": i.product_id,
						"nums": i.nums
					})
				}
				this.$api.batchsetcart({
					cart
				}, res => {
					if (res.status) {
						this.$common.successToShow(res.msg, () => {
							let newData = '';
							for (let key in res.data.ids) {
								newData += ',' + res.data.ids[key];
							}
							if (newData.substr(0, 1) == ',') {
								newData = newData.substr(1);
							}
							_this.$common.navigateTo('/pages/goods/place-order/index?cart_ids=' + JSON
								.stringify(newData));
						})
					} else {
						this.$common.errorToShow(res.msg)
					}
				})
				console.log(val);
			},
			// 初始化数据并获取订单列表
			initData(page = 1) {
				this.page = page
				this.list = []
				this.orderList()
			},
			// 订单状态切换
			onClickItem(index) {
				if (this.tab !== index) {
					this.$store.commit('orderTab', index)
					this.initData()
				}
			},
			// 获取订单列表
			orderList() {
				let data = {
					page: this.page,
					limit: this.limit,
					status: this.status[this.tab]
				}
				this.loadStatus = 'loading'
				this.$api.orderList(data, res => {
					if (res.status) {
						let _list = res.data.list
						if (res.data.status == this.status[this.tab]) {
							this.list = [...this.list, ...this.formatOrderStatus(_list)]
							// 判断所有数据是否请求完毕
							if (res.data.count > this.list.length) {
								this.page++
								this.loadStatus = 'more'
							} else {
								this.loadStatus = 'noMore'
							}
						}
					} else {
						this.$common.errorToShow(res.msg)
					}
				})
				if (this.isReload) {
					this.isReload = false
				}
			},
			syTime(e) {
				
				let b = e * 1000
				
				return b
			},
			// 确认收货
			tackDelivery(index) {
				this.$common.modelShow('提示', '确认执行收货操作吗?', () => {
					let data = {
						order_id: this.list[index].order_id
					}
					this.$api.confirmOrder(data, res => {
						if (res.status) {
							this.$common.successToShow('确认收货成功', () => {
								if (this.tab !== 0) {
									this.list.splice(index, 1)
								} else {
									this.initData()
								}
							})
						} else {
							this.$common.errorToShow(res.msg)
						}
					})
				})
			},
			// 订单状态统一在这处理
			formatOrderStatus(orderList) {
				orderList.forEach(item => {
					switch (item.status) {
						case 1:
							if (item.pay_status === 1) {
								this.$set(item, 'order_status_name', '待付款')
							} else if (item.pay_status >= 2 && item.ship_status === 1) {
								this.$set(item, 'order_status_name', '待发货')
							} else if (item.pay_status >= 2 && item.ship_status === 2) {
								this.$set(item, 'order_status_name', '部分发货')
							} else if (item.pay_status >= 2 && item.ship_status >= 3 && item.confirm === 1) {
								this.$set(item, 'order_status_name', '已发货')
							} else if (item.pay_status >= 2 && item.ship_status >= 3 && item.confirm >= 2 && item
								.is_comment === 1) {
								this.$set(item, 'order_status_name', '已完成')
							} else if (item.pay_status >= 2 && item.ship_status >= 3 && item.confirm >= 2 && item
								.is_comment >= 2) {
								this.$set(item, 'order_status_name', '已评价')
							}
							break
						case 2:
							this.$set(item, 'order_status_name', '完成')
							break
						case 3:
							this.$set(item, 'order_status_name', '取消')
							break
					}
				});
				for (let i in orderList) {
					for (let j in orderList[i].items) {
						if (orderList[i].items[j].promotion_list) {
							orderList[i].items[j].promotion_list = JSON.parse(orderList[i].items[j].promotion_list);
						}
					}
				}
				return orderList
			}
		},
		// 页面下拉到底部触发
		onReachBottom() {
			if (this.loadStatus == 'more') {
				this.orderList()
			}
		}
	}
</script>

<style scoped>
	::v-deep .u-count-down__text {
		font-size: 24rpx !important;
	}

	.goods-price {
		text-align: left;
	}

	.segmented-control {
		/*  #ifdef  H5  */
		top: 44px;
		/*  #endif  */
		/*  #ifndef  H5  */
		top: 0;
		/*  #endif  */
		background-color: #fff;
		position: fixed;
		z-index: 999;
	}


	.segmented-control-item {
		line-height: 70upx;
	}

	.order-list {}

	.order-item {
		margin: 30rpx 30rpx;

	}

	.img-list {}

	.cell-group {
		background-color: transparent;
	}

	.cell-item {
		padding: 20rpx 20rpx 16rpx 20rpx;
		background: #202126;
	}

	.img-list-item {
		background: #202126;
	}

	.cell-hd-title {
		font-size: 26upx;
		color: #666;
	}

	.cell-ft-text {
		top: 0;
		font-size: 22upx;
		color: #333;
	}

	.btn.again {
		margin-right: 20rpx;
	}

	.order-list-button {
		width: 100%;
		background: #202126;
		text-align: right;
		padding: 20upx 26upx;
	}

	.order-list-button .btn {
		height: 50upx;
		line-height: 50upx;
	}

	.order-list-button .btn-w {
		margin-left: 20upx;
	}

	.goods-num .cell-ft-text {
		color: #999;
		line-height: 32upx;
	}

	.goods-num .cell-ft-text:first-child {
		margin-left: 10upx;
	}

	.order-none {
		text-align: center;
		padding: 200upx 0;
	}

	.order-none-img {
		width: 274upx;
		height: 274upx;
	}

	.goods-name {
		min-height: 74upx;
	}
</style>